<template>
	<view class="container">
		<view class="content">
			<image class="logo" mode="aspectFill" src="/static/logo.png"></image>
			<text class="title">中路建设（云南）有限公司</text>
		</view>
		<view v-if="!loading" class="action">
			<button class="phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				手机号一键登录
			</button>
			<!-- <text class="account" @click="handleOnAccountLogin">
				帐号密码登录
			</text> -->
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { nextTick, ref, watch } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useSysStore } from '../../store/sys';
	import { useAuthStore } from '../../store/auth';
	import { useUserStore } from '../../store/user';
	import { useECardStore } from '../../store/ecard';

	// data
	const loading = ref(true)
	const { inited } = storeToRefs(useSysStore())

	// methods
	const handleOnAccountLogin = () => {
		uni.navigateTo({
			url: '/pages/login/account'
		})
	}
	const getPhoneNumber = (res = {}) => {
		const code = res.detail?.code
		// 用户没有授权手机
		if (!code) return

		uni.showLoading({ title: '登录中……' })
		loading.value = true

		useAuthStore().mpPhoneLogin(code).then(data => {
			return useUserStore().refreshUserInfo() // 刷新用户数据
		}).then(({ id }) => {
			uni.switchTab({ url: '/pages/user/card' }) // 跳转到首页
			return useECardStore().loadUserSettings(id)
		}).catch(({ message = '登录失败' }) => {
			uni.showModal({
				title: '错误',
				content: message,
				showCancel: false
			})
		}).finally(() => {
			loading.value = false
			uni.hideLoading()
		})
	}

	// watch
	watch(inited, (val) => {
		uni.showLoading({ title: '初始化……' })
		// 已经授权登录，进入主页
		if (useAuthStore().rtoken && inited.value) {
			setTimeout(() => {
				uni.hideLoading()
				loading.value = false
				uni.switchTab({ url: '/pages/user/card' }) // 跳转到首页
			}, 500)
		} else if (inited.value) {
			uni.hideLoading()
			loading.value = false
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100vh;
		background-size: cover;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: url() no-repeat;
			background-size: cover;
			background-repeat: no-repeat;
			opacity: 0.4;
			z-index: -1;

		}
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		height: 30%;

		&>.logo {
			width: 42.5rpx;
			height: 50rpx;
			margin-top: 10rpx;
		}

		&>.title {
			font-size: 40rpx;
			color: #515151;
			text-shadow: 2rpx 2rpx 2rpx #fff;
		}
	}

	.action {
		padding: 0 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40rpx;
		padding: 0;

		&>.phone {
			color: #ffffff;
			background-color: #1AAD19;
			border-color: #1AAD19;
			width: 350rpx;
			padding: 10rpx;
		}

		&>.account {
			color: #ffffff;
			font-size: 24rpx;
		}
	}
</style>